<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#ul1{
			background-color: green;
			color: #fff;
		}
		#ul2{
			background-color: red;
		}
	</style>
	<script type="text/javascript">
	window.onload=function(){
		var ul1 = document.getElementById('ul1');
        var button = document.getElementById('button');

        button.onclick=function(){
            var aLi=ul1.getElementsByTagName('li');
            //排序需要使用Sort
            //因为Sort这个东西。只能在数组下面使用
            //ALI这个东西看着像数组，实际上是元素集合，并不是数组。只是有数组的一些特性
            //所以我们考虑创建一个空数组
            //把我们的元素集合中的内容，添加到数组中去。转换为数组
            var arr = [];
            for (var i = 0 ; i < aLi.length; i++) {
            	arr[i] = aLi[i];
            }

            //在创建完数组之后、哪么我们这个数组中就有了一堆的LI元素了，这样的话。我们就可以对这个数组进行排序了
            
            //sort需要一个比较函数
            arr.sort(function(li1,li2){
            	var n1=parseInt(li1.innerHTML);
            	var n2=parseInt(li2.innerHTML);
            	return n1-n2;
            });
            for (var i2 = 0 ; i2 < arr.length; i2++) {
            	console.log(arr[i2]);
            	alert('这次应该把 '+arr[i2].innerHTML+' 放到最后');
            	ul1.appendChild(arr[i2]);
            }
        	
        };
     };
	</script>
</head>
<body>

   <input type="button" value="排序" id="button" />

	<ul id="ul1">
		<li>7</li>
		<li>4</li>
		<li>8</li>
		<li>3</li>
		<li>0</li>
	</ul>

</body>
</html>